<!--
功能：工作台
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-14 14:41:37
-->
<template>
  <div class="page-container">
    <a-row :gutter="10">
      <!-- 用户信息 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="page-card">
          <div class="user-box">
            <img
              src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"
              alt=""
              srcset=""
            />
            <div class="user-content">
              <div class="user-name">下午好，Admin</div>
              <div class="user-text">
                Ant Desgin Vue 开源社区 | 软件研发部 | 前端工程师 | VUE平台
              </div>
            </div>
            <div class="user-count">
              <div class="user-count-item">
                <div class="user-name">项目</div>
                <div class="user-number">56</div>
              </div>
              <a-divider type="vertical" />
              <div class="user-count-item">
                <div class="user-name">待办事项</div>
                <div class="user-number">8/24</div>
              </div>
              <a-divider type="vertical" />
              <div class="user-count-item">
                <div class="user-name">审批</div>
                <div class="user-number">8</div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <!-- 统计栏 -->
      <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>访问量</span>
            </div>
            <div class="page-card-header-right"></div>
          </div>
        </div>
      </a-col>
      
    </a-row>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
.page-container {
  .page-card {
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #ffffff;
    margin-bottom: 10px;
    box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      border-bottom: 1px solid #e8eaec;
      font-size: 15px;
      color: #515a6e;
    }
  }
  .user-box {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img{
      width:60px;
      height:60px;
      border-radius: 50%;
    }
  }
  .user-content{
    flex: 1;
    margin: 0px 10px;
    .user-name{
      color: #17233d;
      font-size: 22px;
    }
    .user-text{
      color: #515a6e;
      font-size: 15px;
      margin-top: 8px;
    }
  }
  .user-count{
    display: flex;
    align-items: center;
  }
  .user-count-item{
    text-align: center;
    margin: 0px 10px;
  }
  .user-name{
    font-size: 16px;
    color: #515a6e;
  }
  .user-number{
    font-size: 24px;
    margin-top: 6px;
    color: #17233d;
  }
}
</style>
